<template>
  <div class="order-info box">
    <h3>订单信息</h3>
    <div class="item">
      <span class="label">订单号</span>
      <span>{{ orderDetail.number }}</span>
    </div>
    <div class="item">
      <span class="label">期望时间</span>
      <span>{{ orderDetail.deliveryStatus === 1 ? '立即配送' : '预约' }}</span>
    </div>
    <div class="item" style="height: auto">
      <span class="label">配送地址</span>
      <span class="address"> {{ orderDetail.address }}<br />{{ orderDetail.consignee }}{{ orderDetail.phone }} </span>
    </div>
    <div class="item">
      <span class="label">备注</span>
      <span>{{ orderDetail.remark ? orderDetail.remark : '您暂未添加备注' }}</span>
    </div>
    <div class="item">
      <span class="label">下单时间</span>
      <span>{{ orderDetail.orderTime }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { OrderDetailResult } from '@/types/order'
defineProps<{
  orderDetail: OrderDetailResult
}>()
</script>
<style scoped lang="scss">
.order-info {
  padding: 10px;
}
.item {
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-medium);
  margin-top: 10px;
  display: flex;
  align-items: center;
  .label {
    width: 80px;
  }
  .address {
    display: inline-block;
  }
}
</style>
